<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	  <style type="text/css">
        .webpartTitle
        {
            background-color: #E3EFFF;
            border-left: 1px solid #ccc;
            border-right: 1px solid #ccc;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            width: 100%;
            height: 24px;
            padding: 5px 12px 5px 12px;
            font-family: 微软雅黑;
            font-size: 14px;
        }
        .webpartBody
        {
            border-left: 1px solid #ccc;
            border-right: 1px solid #ccc;
            border-top: 0px solid #ccc;
            border-bottom: 1px solid #ccc;
            background-color: White;
            width: 100%;
            padding: 5px 12px 5px 12px;
            font-family: 微软雅黑;
            font-size: 14px;
        }
        .button
        {
            background-image: url("icons/toolbar/btn_common.png");
            border: 0px solid #ccc;
            width: 79px;
            height: 22px;
            color: White;
            cursor: hand;
            font-family: 微软雅黑;
            font-size: 12px;
        }
        .popupPanel
        {
            text-align: center;
            vertical-align: middle;
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2002;
        }
        .icon
        {
            width: 24px;
            height: 24px;
            border: 2px solid transparent;
            padding: 3px 3px 3px 3px;
            cursor: default;
        }
        
    </style>

	<style type="text/css">
	body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
	#allmap {width: 100%; height:600px; overflow: hidden;}
	#result {width:100%;font-size:12px;}
	dl,dt,dd,ul,li{
		margin:0;
		padding:0;
		list-style:none;
	}
	p{font-size:12px;}
	dt{
		font-size:14px;
		font-family:"微软雅黑";
		font-weight:bold;
		border-bottom:1px dotted #000;
		padding:5px 0 5px 5px;
		margin:5px 0;
	}
	dd{
		padding:5px 0 0 5px;
	}
	li{
		line-height:28px;
	}
	</style>
	<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=C6a9bbce9b1e3be4809d519a68eccad2"></script>
	<!--加载鼠标绘制工具-->
	<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
	<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
	<!--加载检索信息窗口-->
	<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
	<script language="javascript" type="text/javascript" src="js/emap.js"></script>
	<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
	<title>百度地图</title>

	
</head>
<body>
    <textarea id="EMapLayerJsonString" rows="10" cols="5" style="display: none">
    </textarea>
	<table style="width:1250px" border="0" cellpadding="0" cellspacing="15">
		<tr>
			<td  style="width:100%" valign="top">
				<div id="allmap" style="overflow:hidden;">	
					<div id="map" style="height:100%;"></div>
				</div>
			</td>
		</tr>
	</table>
	<div id="tips" style=" margin-left:10px; margin-top:5px;float:left">
	</div>
	<script type="text/javascript">

	

	// 百度地图API功能
	var map = new BMap.Map("allmap", {enableMapClick:false/**minZoom:4,maxZoom:8**/});//构造底图时，关闭底图可点功能
	
	map.addControl(new BMap.NavigationControl());
	map.addControl(new BMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP]}));//取消三维
	
	//var point = new BMap.Point(116.331398,39.897445);
	//map.centerAndZoom(point,11);

	
	
	$(document).ready(function(){
		initialMap();
	});

	/* 创建和初始化地图
	 * 设置地图的状态，并为地图添加监听事件
	 */
	function initialMap(){
		
		var url = document.location.href; //获取url中"?"符后的字串 
		var ajaxUrl = getQueryString("url", url);
		var x = getQueryString("x", url);
		var y = getQueryString("y", url);
		var zoom = getQueryString("zoom", url);
		
		if(ajaxUrl != null && ajaxUrl !=""){
			$.ajax({
				asyn : true,
				cache : false,
				type : "GET",
				url : ajaxUrl,
				dataType : 'json',
		  	    success:function(data,textStatus,jqXHR){
					$("#EMapLayerJsonString").text(data.mapJson);
					importMap();
		  	    }
			});
		}
		
		if(x == null || x == ""){
			x=116.403874;
			//alert("x坐标为空，默认设置为116.403874");
		}
		if(y == null || y == ""){
			y=39.914889;
			//alert("y坐标为空，默认设置为39.914889");
		}
		if(zoom == null || zoom == ""){
			zoom=12;
			//alert("当前地图级别为空，默认设置为12");
		}
		
		map.centerAndZoom(new BMap.Point(x,y), zoom);
		map.enableScrollWheelZoom();
		map.enableKeyboard();
		//注册地图上的事件
	//	map.addEventListener("zoomend",resetMapZoom);
	//	map.addEventListener("dragend",resetMapCenter);
	//	map.addEventListener("moveend",resetMapCenter)

	}
	
	
	function theLocation(){
		var city = document.getElementById("cityName").value;
		if(city != ""){
			map.centerAndZoom(city,11);      // 用城市名设置地图中心点
		}
	}
	
	map.enableScrollWheelZoom(true); //启用滚轮放大缩小

	map.disableDoubleClickZoom();

	

	var enableEditingOverlay;
    var overlays = [];
	
	var tipsDom = document.getElementById("tips");
	var overlaycomplete = function(e){
		
		e.overlay.code = $("#LayerEditor_code").val();
	    e.overlay.name = $("#LayerEditor_name").val();
        overlays.push(e.overlay);
        
       
        // 其它图形拖动会有问题
        if(drawingMode == BMAP_DRAWING_MARKER)
        	e.overlay.enableDragging();
		e.overlay.addEventListener("dblclick", function(e) {

			for(var i = 0; i < overlays.length; i++){
				overlays[i].disableEditing();
			}
			enableEditingOverlay = e.target;
			e.target.enableEditing();
		});
		drawingManager.close();
		// 清空
		$("#LayerEditor_code").val("");
        $("#LayerEditor_name").val("");
    };

	

	
	$(document).keyup(function(e) {

		if (e.keyCode == 27) { 
			if(enableEditingOverlay != null){
				enableEditingOverlay.disableEditing();
			}
			// escape key maps to keycode `27`
		}
	}
	);
	


    var styleOptions = {
        strokeColor:"red",    //边线颜色。
        fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
        strokeWeight: 3,       //边线的宽度，以像素为单位。
        strokeOpacity: 0.8,	   //边线透明度，取值范围0 - 1。
        fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
        strokeStyle: 'dashed' //边线的样式，solid或dashed。
    }
	
    //实例化鼠标绘制工具
		var drawingManager = new BMapLib.DrawingManager(map, {
			isOpen: false, //是否开启绘制模式
			enableDrawingTool: false, //是否显示工具栏
			drawingToolOptions: {
				anchor: BMAP_ANCHOR_TOP_LEFT, //位置
				offset: new BMap.Size(5, 5), //偏离值
				drawingModes : [
					BMAP_DRAWING_MARKER,
					BMAP_DRAWING_POLYLINE,
					BMAP_DRAWING_POLYGON
				 ],
				scale: 1.0 //工具栏缩放比例
			},
			/*circleOptions: styleOptions, //圆的样式*/
			polylineOptions: styleOptions, //线的样式
			polygonOptions: styleOptions
		});  
		
		 //添加鼠标绘制工具监听事件，用于获取绘制结果
		drawingManager.addEventListener('overlaycomplete', overlaycomplete);
	
	var addoverlay = function(e){
		
		var overlayString = e.target.toString();
			if(overlayString.indexOf("Marker") == -1){
				
				e.target.addEventListener("dblclick", function(e) {
		/*
					for(var i = 0; i < overlays.length; i++){
						overlays[i].disableEditing();
					}*/
					enableEditingOverlay = drawingManager;
					e.target.enableEditing();
				});
			}
		
		
    };

	map.addEventListener('addoverlay', addoverlay);

    function clearAll() {
		for(var i = 0; i < overlays.length; i++){
            map.removeOverlay(overlays[i]);
        }
        overlays.length = 0   
    }

	var pathPoints = new Array();
	function traceOverlays(){
		for(var i = 0; i < overlays.length; i++){
			var overlay = overlays[i];
			var points = overlay.getPath();
			
			
			for(var j = 0; j < points.length; j++){
				var point = points[j]
				pathPoints.push(new Array(point.lng,point.lat));
				
			}
			savePoints(pathPoints);
			
			alert(points.length);
            alert(overlays[i]);
        }
	};
	
	//运行信息提示
	function savePoints(message)
	{
		tipsDom.innerHTML = message;
	}

	var drawingMode;

	function addMarker(){
		if(!initCheck()) return;
		
		//initStylePanel();
		drawingMode = BMAP_DRAWING_MARKER;
		var emapStyleOptions = new EmapStyleOptions();
		initDrawingManager2(drawingManager);		
	}
	
	 function initCheck() {
	 	var code = $("#LayerEditor_code").val();
        var name = $("#LayerEditor_name").val();
         
    	if ((name == null) || (name == "")) {
            alert("必须填写名称！");
            return false;
        }
        if ((code == null) || (code == "")) {
            alert("必须填写代码！");
            return false;
        }
        return true;
	 }

	function addPolyline(){
		if(!initCheck()) return;
		initStylePanel2();
		drawingMode = BMAP_DRAWING_POLYLINE;	

		
	}

	function addPolygon(){
		if(!initCheck()) return;
		initStylePanel();
		drawingMode = BMAP_DRAWING_POLYGON;		
		
		
		
	}

	function closeOverlapStyleEditor(){
		document.getElementById("AreaEditor").style.display = "none";
	}
	
	function closeOverlapStyleEditor2(){
		document.getElementById("AreaEditor2").style.display = "none";
	}

	function beginPaint(){
		var emapStyleOptions = new EmapStyleOptions();
		
		var strokeColor_panel = document.getElementById("strokeColor");
		if(strokeColor_panel != null){
			if(typeof(strokeColor_panel._s1) == "undefined" || strokeColor_panel._s1 ==''){
				alert("必须选择边线颜色！");
				return;
			}
			emapStyleOptions.strokeColor = strokeColor_panel._s1.fillColor;
			
		}
		
        

		var fillColor_panel = document.getElementById("fillColor");
		if(fillColor_panel != null){
			if(typeof(fillColor_panel._s1) == "undefined" || fillColor_panel._s1 ==''){
				alert("必须选择填充颜色！");
				return;
			}
			emapStyleOptions.fillColor = fillColor_panel._s1.fillColor;
		}

		var strokeWeight = document.getElementById("strokeWeight").value;
		if(strokeWeight != null){
			emapStyleOptions.strokeWeight = strokeWeight;
			
		}

		var strokeOpacity = document.getElementById("strokeOpacity").value;
		if(strokeOpacity != null){
			emapStyleOptions.strokeOpacity = strokeOpacity;
			
		}

		var fillOpacity = document.getElementById("fillOpacity").value;
		if(fillOpacity != null){
			emapStyleOptions.fillOpacity = fillOpacity;
			
		}

		var strokeStyle = document.getElementById("strokeStyle").value;

		if(strokeStyle != null){
			emapStyleOptions.strokeStyle = strokeStyle;
			
		}
		initDrawingManager2(drawingManager, emapStyleOptions);
		

		 document.getElementById("AreaEditor").style.display = "none";
	}
	
	function beginPaint2(){
		var emapStyleOptions = new EmapStyleOptions();
		
		var strokeColor_panel = document.getElementById("strokeColor2");
		if(strokeColor_panel != null){
			if(typeof(strokeColor_panel._s1) == "undefined" || strokeColor_panel._s1 ==''){
				alert("必须选择边线颜色！");
				return;
			}
			emapStyleOptions.strokeColor = strokeColor_panel._s1.fillColor;
			
		}
		
        

		
		var strokeWeight = document.getElementById("strokeWeight2").value;
		if(strokeWeight != null){
			emapStyleOptions.strokeWeight = strokeWeight;
			
		}

		var strokeOpacity = document.getElementById("strokeOpacity2").value;
		if(strokeOpacity != null){
			emapStyleOptions.strokeOpacity = strokeOpacity;
			
		}

		

		var strokeStyle = document.getElementById("strokeStyle2").value;

		if(strokeStyle != null){
			emapStyleOptions.strokeStyle = strokeStyle;
			
		}
		initDrawingManager2(drawingManager, emapStyleOptions);
		

		 document.getElementById("AreaEditor2").style.display = "none";
	}

	function initDrawingManager2(drawingManager,emapStyleOptions){
		 //添加鼠标绘制工具监听事件，用于获取绘制结果
		
		drawingManager.polylineOptions = emapStyleOptions;
		drawingManager.polygonOptions = emapStyleOptions;
		drawingManager.setDrawingMode(drawingMode); 
		drawingManager.open();
	}

	
	
	function copyEMapLayerJsonString() {
		var script = document.getElementById("EMapLayerJsonString").innerText;
		window.clipboardData.setData("Text", script);
		alert("复制成功");
	}

	


	function exportMap() {
		var eMapLayer = new EMapLayer(document.getElementById("LayerEditor_name").value,document.getElementById("LayerEditor_code").value);
		
		
		for(var i = 0; i < overlays.length; i++){
			var overlay = overlays[i];
			var emapStyleOptions = new EmapStyleOptions();
			
			var overlayString = overlay.toString();
			if(overlayString.indexOf("Polyline") != -1 || overlayString.indexOf("Polygon") != -1){
				try{
					var strokeStyle = overlay.getStrokeStyle();
					if(strokeStyle != null){
						emapStyleOptions.strokeStyle = strokeStyle;
					}

					var strokeColor = overlay.getStrokeColor();
					if(strokeColor != null){
						emapStyleOptions.strokeColor = strokeColor;
					}
					
					var fillColor = overlay.getFillColor();
					if(fillColor != null){
						emapStyleOptions.fillColor = fillColor;
					}

					var strokeWeight = overlay.getStrokeWeight();
					if(strokeWeight != null){
						emapStyleOptions.strokeWeight = strokeWeight;
					}

					var strokeOpacity = overlay.getStrokeOpacity();
					if(strokeOpacity != null){
						emapStyleOptions.strokeOpacity = strokeOpacity;
					}

					var fillOpacity = overlay.getFillOpacity();
					if(fillOpacity != null){
						emapStyleOptions.fillOpacity = fillOpacity;
					}
				}
				catch(ex){};
			}


			
			var item;
			// Marker
			if(overlayString.indexOf("Marker") > -1){
				var position = overlay.getPosition();
				item = new EMapMarker(overlay.name, overlay.code,position.lng, position.lat);
				eMapLayer.items.push(item);
				
			}
			else if(overlayString.indexOf("Polyline") > -1){
				var pathPoints = new Array();
				var points = overlay.getPath();
				for(var j = 0; j < points.length; j++){
					var point = points[j]
					pathPoints.push(new Array(point.lng,point.lat));
					
				}
				item = new EMapPolyline(overlay.name, overlay.code, pathPoints);
				item.styleOptions = emapStyleOptions;
				eMapLayer.items.push(item);
			}
			else if(overlayString.indexOf("Polygon") > -1){
				var pathPoints = new Array();
				var points = overlay.getPath();
				for(var j = 0; j < points.length; j++){
					var point = points[j]
					pathPoints.push(new Array(point.lng,point.lat));
					
				}
				item = new EMapPolygon(overlay.name, overlay.code, pathPoints);
				item.styleOptions = emapStyleOptions;
				eMapLayer.items.push(item);
			}

			
			
			

			document.getElementById("EMapLayerJsonString").innerText = JSON.stringify(eMapLayer);
			
        }
	}

	function importMap() {
		var jsonString = document.getElementById("EMapLayerJsonString").innerText;
		//alert(jsonString);
		var eMapLayer = JSON.parse(jsonString);
		
		
		for(var i = 0; i < eMapLayer.items.length; i++){
			var overlay = eMapLayer.items[i];
			if(overlay.type == "Marker"){
				var marker = new BMap.Marker(new BMap.Point(overlay.position[0], overlay.position[1])); // 创建点
				marker.name = overlay.name;
				marker.code = overlay.code;
				overlays.push(marker);
				marker.enableDragging();
				map.addOverlay(marker);
				var label = new BMap.Label(overlay.name,{offset:new BMap.Size(20,-10)});	
				marker.setLabel(label);
			}
			else if(overlay.type == "Polyline"){
				var points = new Array();
				for(var j = 0; j < overlay.path.length; j++){
					var position = overlay.path[j];
					points.push(new BMap.Point(position[0], position[1]));
				}
				
				var polyline = new BMap.Polyline(points, overlay.styleOptions);   //创建折线
				polyline.name = overlay.name;
				polyline.code = overlay.code;
				
				overlays.push(polyline);
				map.addOverlay(polyline);
				
				
				

			}
			else if(overlay.type == "Polygon"){
				var points = new Array();
				for(var j = 0; j < overlay.path.length; j++){
					var position = overlay.path[j];
					points.push(new BMap.Point(position[0], position[1]));
				}
				
				
				var polygon = new BMap.Polygon(points, overlay.styleOptions);   //创建多边形
				polygon.name = overlay.name;
				polygon.code = overlay.code;
				overlays.push(polygon);
				map.addOverlay(polygon);
				
				
			}
		}
	}

	// 图层
	function EMapLayer(name, code) {
		this.name = name;
		this.code = code;
		this.items = new Array();
		this.visible = false;
	}
	
	function EmapStyleOptions() {
	 
        this.strokeColor = "blue";    //边线颜色。
        this.fillColor = "red";    //填充颜色。当参数为空时，圆形将没有填充效果。
        this.strokeWeight = 3;      //边线的宽度，以像素为单位。
        this.strokeOpacity = 0.8;	   //边线透明度，取值范围0 - 1。
        this.fillOpacity = 0.6;      //填充的透明度，取值范围0 - 1。
        this.strokeStyle = 'dashed'; //边线的样式，solid或dashed。
   
	}
	
	// EMapMarker 对应Baidu的Marker
	function EMapMarker(name, code, lng, lat) {
		this.name = name;
		this.code = code;
		this.type = "Marker";
		/* title 	String 	鼠标移到marker上的显示内容 */
		this.position = new Array();
		this.position.push(lng);
		this.position.push(lat);
		/*
		strokeColor:\"blue\", strokeWeight:6, strokeOpacity:0.5
		*/
	}

	 function initStylePanel() {
            var strokeColor_panel = document.getElementById("strokeColor");
            initStylePannel(strokeColor_panel, null);

			 var fillColor_panel = document.getElementById("fillColor");
            initStylePannel(fillColor_panel, null);

			 document.getElementById("AreaEditor").style.display = "block";
			 popCenter("AreaEditor");
	}
	 
	 function initStylePanel2() {
         var strokeColor_panel = document.getElementById("strokeColor2");
         initStylePannel(strokeColor_panel, null);

		

			 document.getElementById("AreaEditor2").style.display = "block";
			 popCenter("AreaEditor2");
	}

	 function popCenter(id) {
            document.getElementById(id).style.top = ((document.body.clientHeight - document.getElementById(id).offsetHeight) / 2) + "px";
            document.getElementById(id).style.left = ((document.body.clientWidth - document.getElementById(id).offsetWidth) / 2) + "px";
        }

	// EMapPolyline 对应Baidu的 Polyline
	function EMapPolyline(name, code,path) {
		this.name = name;
		this.code = code;
		this.type = "Polyline";
		this.path = path
		/** path:Array<Point> 设置折线的点数组 
			strokeColor(color:String) 	设置折线的颜色。
			strokeOpacity(opacity:Number) 设置透明度，取值范围0 - 1。
			strokeWeight(weight:Number) 设置线的宽度，范围为大于等于1的整数。
			strokeStyle(style:String) 	设置是为实线或虚线，solid或dashed。
			getBounds() 	Bounds 	返回覆盖物的地理区域范围。 
		*/

	}

	// EMapPolygon 对应Baidu的 Polygon
	function EMapPolygon(name, code,path) {
		this.name = name;
		this.code = code;
		this.type = "Polygon";
		this.path = path
		/** path:Array<Point> 设置折线的点数组 
			strokeColor(color:String) 	设置折线的颜色。
			strokeOpacity(opacity:Number) 设置透明度，取值范围0 - 1。
			strokeWeight(weight:Number) 设置线的宽度，范围为大于等于1的整数。
			strokeStyle(style:String) 	设置是为实线或虚线，solid或dashed。
			fillColor(color:String) 	设置多边形的填充颜色，参数为合法的CSS颜色值。当参数为空字符串时，折线覆盖物将没有填充效果。
			fillOpacity(opacity:Number) 设置多边形的填充透明度，取值范围0 - 1。 
			getBounds() 	Bounds 	返回覆盖物的地理区域范围。 
		*/

	}

	function EMapInfoWindow(){
		/*
		 width : 200,     // 信息窗口宽度
		 height: 100,     // 信息窗口高度
		 title : "海底捞王府井店" , // 信息窗口标题
		 content : "aa",
		 enableMessage:false,//设置允许信息窗发送短息
	     message:"火锅好去处" //设置信息窗口消息
		*/
	}

	
	//在配置项中重新设定地图中心点
	function resetMapCenter(){
		var point = map.getCenter();
		var x = point.lng, y = point.lat;
		$("#input_x").text(x);
		$("#input_y").text(y);
		config.center_point = point;
	}

	//在配置项中重新设定地图的zoom值
	function resetMapZoom(){
		var zoom = map.getZoom();
		$("#input_zoom").text(zoom);
		config.zoom = zoom;
		resetMapCenter();
	}
	
	// 获取URL地址参数
	function getQueryString(name, url) {
	    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
	    if (!url || url == ""){
		    url = window.location.search;
	    }else{	
	    	url = url.substring(url.indexOf("?"));
	    }
	    r = url.substr(1).match(reg)
	    if (r != null) return unescape(r[2]); return null;
	}
	
</script>
<script type="text/javascript">
	
</script>
</body>
</html>
